import {useRef, useState} from "react";


// 直接往 子组件中传递，子组件属性就是 props 中的属性，支持多种数据
function App() {
    let name = 'this is my son';
    return (
        <div className="App">
            <div>组件通信：父传子</div>
            <Son
                name={name}
                age={20}
                isTrue={false}
                list={['vue', 'react']}
                obj={{name: 'obj-name'}}
                cb={() => console.log('123')}
                sp={<span>this is span children</span>}
            >
                {/* Son 中间的元素 在 Son(props)中的children 中 */}
                <span>this is son span</span>
            </Son>
        </div>
    );
}


function Son(props) {
    console.log(props);
    return <span>this is son, {props.name}: {props.sp}</span>
}

export default App;